<template>
<div>
    <div class="ADlsitShow" v-if="EventList">
        <Row class="type">
            <Col span="4" class="title">类型：</Col>
            <Col span="18" class="text-conent">{{EventList.TYPE_CONTENT}}</Col>
        </Row>
        <Row class="type">
            <Col span="4" class="title">标题：</Col>
            <Col span="18" class="text-conent">{{EventList.EVENT_TITLE}}</Col>
        </Row>
        <Row class="content">
            <Col span="4" class="title">内容：</Col>
            <Col span="18" class="text-conent">{{EventList.EVENT_CONTENT}}</Col>
            <!-- <span class="title">内容：</span>
            <span class="text-conent">{{EventList.EVENT_CONTENT}}</span> -->
        </Row>
        <Row class="imageList">
            <div class="image" v-if="item" v-for="item in imgList" :key="item">
                <img  :src="State.Host + '/itfer-qkfy/rest/files/pictures/' + item"
                    @click="showImg(State.Host + '/itfer-qkfy/rest/files/pictures/' + item)">
            </div>
        </Row>
    </div>
    <pinchzoom :src="src" v-show="pinchzoom" @closeImg="closeImg"/>
</div>
</template>

<script>
export default {
    props: ['EventList'],
    components: {
        pinchzoom: () => import('@/components/common/pinchzoom/pinPage.vue'),
    },
    computed: {
        imgList() {
            return this.EventList.IMGS.split(',')
        }
    },
    data() {
        return {
            State: this.$store.state,
            pinchzoom: false,
            src: ''
        }
    },
    methods: {
        closeImg() {
            this.pinchzoom = false
        },
        showImg(src) {
            this.src = src
            this.pinchzoom = true
        }
    }
}
</script>

<style lang="less">
    .ADlsitShow{
        background-color: #fff;
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        padding-left: 20px;
        .type{
            padding: 10px 0;
            border-bottom: 1px solid #eaeaea;
            .title{
                font-size: 15px;
                font-weight: bold;
            }
            .text-conent{
                font-size: 14px;
                color: #999;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
        }
        .content{
            padding: 10px 0;
            word-wrap: break-word;
            .title{
                font-size: 15px;
                font-weight: bold;
            }
            .text-conent{
                font-size: 14px;
                color: #999;
            }
        }
        .imageList{
            padding: 10px 0;
            .image{
                display: inline-block;
                width: 70px;
                height: 70px;
                padding: 3px;
                border: 1px solid #eaeaea;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
        }
    }
</style>
>>>>>>> .r3574
